<template>
  <div>
    <el-container>
      <el-header>
        <span>修改密码</span>
      </el-header>
    </el-container>
    <div class="graduate-info">
      <div class="campus-enterprise-form">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
          :rules="formLabelAlignRules"
          ref="formLabelAlignRef"
        >
          <el-form-item label="用户名称" prop="name">
            <el-input
              v-model="formLabelAlign.name"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="你的密码" prop="password">
            <el-input
              v-model="formLabelAlign.password"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="新的密码" prop="newPassword">
            <el-input
              v-model="formLabelAlign.newPassword"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="formLabelAlign.confirmPassword"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="check">验证身份</el-button>
            <el-button type="primary" @click="updatePassword"
              >修改密码</el-button
            >
            <el-button type="danger" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-container>
      <el-footer>
        <div>
          <span>专注于互联网校招</span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "RecommendGraduateupdatepassword",

  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        passowrd: "",
        newPassword: "",
        confirmPassword: "",
      },
      formLabelAlignRules: {
        name: [
          {
            required: true,
            message: "用户名不为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "原始密码不能为空",
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            message: "新密码不为空",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            required: true,
            message: "确认密码不能为空",
            trigger: "blur",
          },
        ],
      },
      checked: false,
    };
  },

  mounted() {},

  methods: {
    // 验证身份
    check() {
      this.$refs.formLabelAlignRef.validate((valid) => {
        if (!valid) {
          this.$message({
            message: "输入不能为空",
            type: "error",
          });
          return;
        } else {
          this.$axios
            .post("/graduate/checkIdentify", this.formLabelAlign)
            .then((res) => {
              if (res.data.result === null) {
                this.$message({
                  message: "认证失败",
                  type: "error",
                });
                return;
              } else {
                this.$message({
                  message: "认证成功",
                  type: "success",
                });
                this.checked = true;
              }
            })
            .catch((error) => {
              console.log(error);
              this.$message({
                message: "系统错误!!!",
                type: "error",
              });
            });
        }
      });
    },
    // 修改密码
    updatePassword() {
      // 判断是否已经认证
      if (this.checked === false) {
        this.$message({
          message: "未认证",
          type: "error",
        });
        return;
      }
      // 判断密码输入是否正确
      if (
        this.formLabelAlign.newPassword != this.formLabelAlign.confirmPassword
      ) {
        this.$message({
          message: "两次密码不一致",
          type: "error",
        });
        return;
      }
      // 修改密码
      this.$axios
        .post("/graduate/updatePassword", this.formLabelAlign)
        .then((res) => {
          var respone = res.data.desc;
          if (respone === "修改失败") {
            this.$message({
              message: "修改失败",
              type: "error",
            });
            return;
          } else if (respone === "修改成功") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 重置
    reset() {
      this.$refs.formLabelAlignRef.resetFields();
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #409eff;
  color: white;
  line-height: 60px;
}

.el-footer {
  background-color: #409eff;
  color: white;
  line-height: 60px;
}

.el-footer div {
  margin-left: 43%;
}

.graduate-info {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 480px;
  background: whitesmoke;
  background-image: url(https://img1.baidu.com/it/u=4139099310,2309854459&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500);
  background-size: 1355px 480px;
}

.campus-enterprise-form {
  position: absolute;
  left: 35%;
  top: 100px;
  width: 400px;
  height: 350px;
  border: 1px white solid;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.el-form {
  margin-top: 32px;
  margin-left: 3px;
}
</style>
